<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="icon" href="/images/favicon.ico">
    <link rel="stylesheet" href="/css/item.css">
</head>
<body>
    <!-- 详情页头部区域 模块复用 -->
    <div class="headerBox"></div>
    <!-- 详情页导航栏区域 模块复用 -->
    <div class="navBox"></div>
    <!-- 详情页主内容区 -->
    <div class="container">
        <!-- 商品信息区 -->
        <div class="message">
            <div class="left">
                <div class="smallImgBox" id="smallImgBoxTemplateBox">
                    <script type="text/html" id="smallImgBoxTemplate">
                        <div id="smallImgZoom">
                            {{each data item}}
                                <li class="smallImgList">
                                    <img src="{{item}}" alt="">
                                </li>
                            {{/each}}
                        </div>
                    </script>
                </div>
                <div class="bigImgBox">
                    <img src="#" alt="" id="bigImgZoom">
                </div>
            </div>
            <div class="right">
                <div class="titleBox">
                    <div class="titleBoxLeft">
                        <h2></h2>
                        <h3></h3>
                    </div>
                    <div class="priceBox">
                        <p>¥<span id="price"></span></p>
                    </div>
                </div>
                <div class="activitiesBox">
                    <h5>促销活动</h5>
                    <div class="activitiesMsg"></div>
                </div>
                <div class="typeCountBox">
                    <div class="typeBox">
                        <h5>颜色选择</h5>
                        <div class="typeMsg"></div>
                    </div>
                    <div class="countBox">
                        <h5>数量选择</h5>
                        <div class="countMsg">
                            <i class="downBtn"></i>
                            <span class="count">1</span>
                            <i class="upBtn"></i>
                        </div>
                    </div>
                </div>
                <div class="serviceBox">
                    <h5>服务说明</h5>
                    <div class="serviceMsg"></div>
                </div>
            </div>
        </div>
        <!-- 商品详情区 -->
        <div class="details">
            <div class="details-header">
                <h3 class="details-title">产品信息</h3>
            </div>
            <div class="details-content">
                <img src="#" alt="">
            </div>
        </div>
        <!-- 推荐区 -->
        <div class="commend">
            <div class="commend-header">
                <h3 class="commend-title">相关推荐</h3>
            </div>
            <div class="commend-content" id="commendTemplateBox">
                <script type="text/html" id="commendTemplate">
                    {{each data item}}
                        <li class="commend-list">
                            <div class="commend-list-imgBox">
                                <img src="{{item.shop_info.ali_image}}" alt="">
                            </div>
                            <div class="commend-list-msgBox">
                                <h4>{{item.name}}</h4>
                                <h5>{{item.shop_info.sub_title}}</h5>
                            </div>
                            <div class="commend-list-priceBox">
                                <p>¥<strong>{{item.price}}</strong></p>
                            </div>
                            <a href="/html/item.html?id={{item.id}}" class="commend-list-cover"></a>
                        </li> 
                    {{/each}}
                </script>
            </div>
        </div>
    </div>
    <!-- 详情页购买bar -->
    <div class="buyBar">
        <div class="content">
            <div class="left">
                <h6>您已选择了</h6>
                <div class="msgBox">
                    <h5><span id="totalTitle">Smartisan 真无线TWS蓝牙耳机</span><span> x </span><i id="totalCount">1</i></h5>
                    <p id="totalType">白色</p>
                </div>
            </div>
            <div class="right">
                <div class="priceBox">
                    <span>¥<i id="totalPrice">1998.00</i></span>
                </div>
                <div class="buttonBox">
                    <p>现在购买</p>
                    <p id="cartNowBtn">加入购物车</p>
                </div>
            </div>
            <div class="congratulation">已添加至购物车</div>
        </div>
    </div>
    <!-- 详情页底部区域 模块复用 -->
    <div class="footerBox"></div>
    <!-- 回到顶部 -->
    <div class="toTopBox">
        <div class="toService">
            <i></i>
            <p>联系客服</p>
        </div>
        <div class="toTop">
            <i></i>
            <p>回到顶部</p>
        </div>
    </div>
</body>
    <script src="/lib/require/require.min.js" data-main="/js/item.js"></script>
</html>